<template>
  <div class="directories-management">
    <!-- 顶部操作栏 -->
    <div class="operation-bar">
      <el-button type="primary" @click="handleAddDirectory">
        <el-icon><Plus /></el-icon>新增目录
      </el-button>
      <el-input
        v-model="searchQuery"
        placeholder="搜索目录"
        class="search-input"
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
    </div>

    <!-- 目录树和表单 -->
    <el-row :gutter="20">
      <!-- 左侧目录树 -->
      <el-col :span="8">
        <el-card class="tree-card">
          <template #header>
            <div class="card-header">
              <span>目录结构</span>
            </div>
          </template>
          <el-tree
            ref="treeRef"
            :data="directories"
            :props="defaultProps"
            node-key="id"
            default-expand-all
            highlight-current
            @node-click="handleNodeClick"
          >
            <template #default="{ node, data }">
              <span class="custom-tree-node">
                <span>{{ node.label }}</span>
                <span class="node-actions">
                  <el-button-group>
                    <el-button
                      type="primary"
                      link
                      @click.stop="handleAddChild(data)"
                    >
                      添加
                    </el-button>
                    <el-button
                      type="primary"
                      link
                      @click.stop="handleEdit(data)"
                    >
                      编辑
                    </el-button>
                    <el-button
                      type="danger"
                      link
                      @click.stop="handleDelete(node, data)"
                    >
                      删除
                    </el-button>
                  </el-button-group>
                </span>
              </span>
            </template>
          </el-tree>
        </el-card>
      </el-col>

      <!-- 右侧表单 -->
      <el-col :span="16">
        <el-card class="form-card">
          <template #header>
            <div class="card-header">
              <span>{{ formTitle }}</span>
            </div>
          </template>
          <el-form
            ref="directoryFormRef"
            :model="directoryForm"
            :rules="directoryRules"
            label-width="100px"
          >
            <el-form-item label="目录名称" prop="name">
              <el-input v-model="directoryForm.name" />
            </el-form-item>
            <el-form-item label="上级目录" prop="parentId">
              <el-tree-select
                v-model="directoryForm.parentId"
                :data="directories"
                :props="defaultProps"
                check-strictly
                default-expand-all
                placeholder="请选择上级目录"
              />
            </el-form-item>
            <el-form-item label="排序" prop="sort">
              <el-input-number v-model="directoryForm.sort" :min="0" />
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-switch
                v-model="directoryForm.status"
                :active-value="1"
                :inactive-value="0"
              />
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="directoryForm.remark"
                type="textarea"
                rows="4"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSubmit">保存</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>

    <!-- 删除确认对话框 -->
    <el-dialog
      v-model="deleteDialogVisible"
      title="删除确认"
      width="300px"
    >
      <p>确定要删除该目录吗？如果包含子目录将一并删除。</p>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="deleteDialogVisible = false">取消</el-button>
          <el-button type="danger" @click="confirmDelete">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Plus, Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const searchQuery = ref('')
const deleteDialogVisible = ref(false)
const directoryFormRef = ref(null)
const currentNode = ref(null)
const nodeToDelete = ref(null)

// 目录表单数据
const directoryForm = ref({
  id: '',
  name: '',
  parentId: null,
  sort: 0,
  status: 1,
  remark: ''
})

// 表单校验规则
const directoryRules = {
  name: [
    { required: true, message: '请输入目录名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  sort: [
    { required: true, message: '请输入排序号', trigger: 'blur' }
  ]
}

// 目录树配置
const defaultProps = {
  children: 'children',
  label: 'name'
}

// 模拟目录数据
const directories = ref([
  {
    id: 1,
    name: '根目录',
    parentId: null,
    sort: 0,
    status: 1,
    remark: '根目录',
    children: [
      {
        id: 2,
        name: '报表目录',
        parentId: 1,
        sort: 1,
        status: 1,
        remark: '报表存放目录'
      },
      {
        id: 3,
        name: '模板目录',
        parentId: 1,
        sort: 2,
        status: 1,
        remark: '模板存放目录'
      }
    ]
  }
])

const formTitle = computed(() => {
  return directoryForm.value.id ? '编辑目录' : '新增目录'
})

const handleNodeClick = (data) => {
  currentNode.value = data
  directoryForm.value = { ...data }
}

const handleAddDirectory = () => {
  directoryForm.value = {
    id: '',
    name: '',
    parentId: null,
    sort: 0,
    status: 1,
    remark: ''
  }
}

const handleAddChild = (data) => {
  directoryForm.value = {
    id: '',
    name: '',
    parentId: data.id,
    sort: 0,
    status: 1,
    remark: ''
  }
}

const handleEdit = (data) => {
  currentNode.value = data
  directoryForm.value = { ...data }
}

const handleDelete = (node, data) => {
  nodeToDelete.value = { node, data }
  deleteDialogVisible.value = true
}

const handleSubmit = async () => {
  if (!directoryFormRef.value) return
  
  await directoryFormRef.value.validate((valid) => {
    if (valid) {
      // TODO: 调用API保存目录数据
      ElMessage.success(directoryForm.value.id ? '修改成功' : '新增成功')
      resetForm()
    }
  })
}

const confirmDelete = () => {
  if (!nodeToDelete.value) return
  
  // TODO: 调用API删除目录
  ElMessage.success('删除成功')
  deleteDialogVisible.value = false
  nodeToDelete.value = null
}

const resetForm = () => {
  if (directoryFormRef.value) {
    directoryFormRef.value.resetFields()
  }
  currentNode.value = null
  directoryForm.value = {
    id: '',
    name: '',
    parentId: null,
    sort: 0,
    status: 1,
    remark: ''
  }
}
</script>

<style scoped>
.directories-management {
  padding: 20px;
}

.operation-bar {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
}

.search-input {
  width: 200px;
}

.tree-card,
.form-card {
  height: calc(100vh - 180px);
  overflow-y: auto;
}

.card-header {
  font-weight: bold;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.node-actions {
  opacity: 0;
  transition: opacity 0.2s;
}

.custom-tree-node:hover .node-actions {
  opacity: 1;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style> 